<!--
 * @FileDescription 相机功能
 * @Author 杨宇翔
 * @Date 20220815 14:52:33
 * @LastEditors 杨宇翔
 * @LastEditTime 20220815 14:52:33
-->
<template>
    <div class="camera-settings">
        <div class="speed-dial">
            <p><span>{{  UsageComponent.Default.Speed.value  }}</span><span>km/h</span></p>
            <p><span>车速</span></p>
        </div>

        <div class="radio-group">
            <span>转向灯状态</span>
            <div>
                <template v-for="[id, name] of turnLightStateMap" :key="id">
                    <input type="radio" name="相机功能-转向灯状态" :id="'转向灯状态' + id" hidden :value="id"
                        v-model="UsageComponent.Default.TurnLightState.value">
                    <label :for="'转向灯状态' + id">
                        <img
                            :src="UsageComponent.Default.TurnLightState.value == id ? '/static/BinocularCamera/ic_radio_select.png' : '/static/BinocularCamera/ic_radio_normal.png'">
                        <span>{{  name  }}</span>
                    </label>
                </template>
            </div>
        </div>

        <div class="radio-group">
            <span>雨刮器状态</span>
            <div>
                <template v-for="[id, name] of wiperStateMap" :key="id">
                    <input type="radio" name="相机功能-雨刮器状态" :id="'雨刮器状态' + id" hidden :value="id"
                        v-model="UsageComponent.Default.WiperState.value">
                    <label :for="'雨刮器状态' + id">
                        <img
                            :src="UsageComponent.Default.WiperState.value == id ? '/static/BinocularCamera/ic_radio_select.png' : '/static/BinocularCamera/ic_radio_normal.png'">
                        <span>{{  name  }}</span>
                    </label>
                </template>
            </div>
        </div>

        <div class="slider-group slider-group-accelerator">
            <img src="/static/BinocularCamera/btn-油门踏板-normal.png">
            <span>油门踏板</span>
            <input type="range" name="相机功能" id="相机功能 - 油门踏板" min="0" max="100" step="1"
                v-model="UsageComponent.Default.AcceleratorPedalPercent.value">
        </div>

        <div class="slider-group slider-group-brake">
            <img src="/static/BinocularCamera/btn-制动踏板-normal.png">
            <span>制动踏板</span>
            <input type="range" name="相机功能" id="相机功能 - 制动踏板" min="0" max="100" step="1"
                v-model="UsageComponent.Default.BrakePedalPercent.value">
        </div>

        <div class="state-group">
            <input type="checkbox" v-model="UsageComponent.Default.LaneLineState.value" id="行驶线" hidden>
            <label for="行驶线">
                <img
                    :src="UsageComponent.Default.LaneLineState.value ? '/static/BinocularCamera/ic_xingshixian_select.png' : '/static/BinocularCamera/ic_xingshixian_normal.png'">
                <span>行驶线</span>
            </label>
            <input type="checkbox" v-model="UsageComponent.Default.ObstructionState.value" id="障碍物" hidden>
            <label for="障碍物">
                <img
                    :src="UsageComponent.Default.ObstructionState.value ? '/static/BinocularCamera/ic_zhangaiwu_select.png' : '/static/BinocularCamera/ic_zhangaiwu_normal.png'">
                <span>障碍物</span>
            </label>
        </div>

        <input type="checkbox" v-model="UsageComponent.Default.OnlyShowObstructionDistanceState.value" id="仅显示障碍物距离"
            :disabled="!UsageComponent.Default.ObstructionState.value" hidden>
        <label for="仅显示障碍物距离">
            <img
                :src="UsageComponent.Default.OnlyShowObstructionDistanceState.value ? '/static/BinocularCamera/ic_checkbox_select.png' : '/static/BinocularCamera/ic_checkbox_normal.png'">
            <span>仅显示障碍物距离</span>
        </label>

        <input type="checkbox" v-model="UsageComponent.Default.ShowObstructionInformationState.value" id="显示障碍物综合信息"
            :disabled="!UsageComponent.Default.ObstructionState.value" hidden>
        <label for="显示障碍物综合信息">
            <img
                :src="UsageComponent.Default.ShowObstructionInformationState.value ? '/static/BinocularCamera/ic_checkbox_select.png' : '/static/BinocularCamera/ic_checkbox_normal.png'">
            <span>显示障碍物综合信息</span>
        </label>

        <input type="checkbox" v-model="UsageComponent.Default.OnlyShowNearestObstructionState.value"
            id="仅显示本车行驶区域内离本车最近的障碍物" :disabled="!UsageComponent.Default.ObstructionState.value" hidden>
        <label for="仅显示本车行驶区域内离本车最近的障碍物">
            <img
                :src="UsageComponent.Default.OnlyShowNearestObstructionState.value ? '/static/BinocularCamera/ic_checkbox_select.png' : '/static/BinocularCamera/ic_checkbox_normal.png'">
            <span>仅显示本车行驶区域内离本车最近的障碍物</span>
        </label>

        <input type="checkbox" v-model="UsageComponent.Default.ShowDrivingAreaLineState.value" id="显示行驶区域线"
            :disabled="!UsageComponent.Default.ObstructionState.value" hidden>
        <label for="显示行驶区域线">
            <img
                :src="UsageComponent.Default.ShowDrivingAreaLineState.value ? '/static/BinocularCamera/ic_checkbox_select.png' : '/static/BinocularCamera/ic_checkbox_normal.png'">
            <span>显示行驶区域线</span>
        </label>
    </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { UsageComponent } from './BinocularCameraComponent';

const turnLightStateMap = new Map([
    [0, '无'],
    [-1, '左'],
    [+1, '右'],
]);

const wiperStateMap = new Map([
    [0, '无'],
    [-1, '左'],
    [+1, '右'],
]);

const acceleratorPedalPercentValue = computed(() => `${UsageComponent.Default.AcceleratorPedalPercent.value}%`);
const brakePedalPercentValue = computed(() => `${UsageComponent.Default.BrakePedalPercent.value}%`);

watch(UsageComponent.Default.AcceleratorPedalPercent, OnAcceleratorPedalPercentChanged);
watch(UsageComponent.Default.BrakePedalPercent, OnBrakePedalPercentChanged);

function OnAcceleratorPedalPercentChanged(percent: number): void {
    UsageComponent.Default.Speed.value = Math.trunc(120 * percent * 0.01);
    UsageComponent.Default.BrakePedalPercent.value = 0;
}

function OnBrakePedalPercentChanged(percent: number): void {
    UsageComponent.Default.AcceleratorPedalPercent.value = 0;
    UsageComponent.Default.Speed.value = 0;
}
</script>

<style scoped>
.camera-settings {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    gap: 2rem;

    padding: 2rem 3.5rem;
}

.speed-dial {
    width: 23.6rem;
    height: 15.4rem;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;

    background-image: url('/static/BinocularCamera/speed-dial.png');
    background-position: center center;
    background-repeat: no-repeat;
}

.speed-dial>p:first-of-type>span {
    color: white;
}

.speed-dial>p:first-of-type>span:first-of-type {
    font-size: 4.8rem;
    line-height: 4.8rem;
}

.speed-dial>p:first-of-type>span:last-of-type {
    font-size: 1.6rem;
    line-height: 1.6rem;
}

.speed-dial>p:last-of-type>span {
    color: #81859C;
    font-size: 1.6rem;
    line-height: 1.6rem;
}

.radio-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 1rem;
}

.radio-group>span {
    color: #81859C;
    font-size: 1.4rem;
}

.radio-group>div {
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.radio-group>div>label {
    display: flex;
    align-items: center;
}

.radio-group>div>label>span {
    padding-left: 1rem;

    color: #81859C;
    font-size: 1.6rem;
}

.radio-group>div>input:checked+label>span {
    color: white;
}

.slider-group {
    display: flex;
    justify-content: stretch;
    align-items: center;
    gap: 1rem;
}

.slider-group>img {
    width: 3rem;
    height: 3rem;
}

.slider-group>span {
    color: #B1B1D4;
    font-size: 1.4rem;
    white-space: nowrap;
}

.slider-group>input {
    width: 100%;
    height: 0.6rem;

    border-radius: 0.3rem;

    background: linear-gradient(90deg, #807DE1 0%, #218CDE 100%) #B1B1D41A;
    background-repeat: no-repeat;

    appearance: none;
}

.slider-group>input::-webkit-slider-thumb {
    appearance: none;

    position: relative;
    width: 2rem;
    height: 2rem;

    border-radius: 50%;
    background: linear-gradient(180deg, #807DE1 0%, #218CDE 100%);

    cursor: pointer;
}

.slider-group-accelerator>input {
    background-size: v-bind(acceleratorPedalPercentValue);
}

.slider-group-brake>input {
    background-size: v-bind(brakePedalPercentValue);
}

.state-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.state-group>label {
    width: 10rem;
    height: 11.5rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    border-radius: 1rem;
    border: solid 0.1rem transparent;
    background-image: linear-gradient(#131620, #131620),
        linear-gradient(90deg, #55595B, #55595B);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.state-group>input:checked+label {
    background-image: linear-gradient(#131620, #131620),
        linear-gradient(90deg, #218cde, #807de1);
}

.camera-settings>label {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.camera-settings>label>span,
.state-group>label>span {
    color: #81859C;
    font-size: 1.4rem;
}

.camera-settings>label>span {
    max-width: 21rem;
    line-height: 1.6rem;
}

.camera-settings>input:checked+label>span,
.state-group>input:checked+label>span {
    color: white;
}

input:disabled+label {
    opacity: 0.3;
}
</style>